import React from 'react';
import Taro from '@tarojs/taro';

import * as T from '../types';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
type IInfoProps = T.IProps & T.IInfoProps;

import { Text, View, Image } from '@tarojs/components';
import './OrderItem.less';
import moment from 'dayjs';
import qIcon from '../../lifeOrders/img/q.png';
import sIcon from '../../lifeOrders/img/s.png';
import phoneIcon from '../../lifeOrders/img/phone.png';
import goodIcon from '@/assets/image/shop/good1.png';
import msgIcon from '../img/msg.png';
const flowStatus = (status) => {
  // if (status == 0) {
  //   return '待支付';
  // } else if (status == 1) {
  //   return '待接单';
  // } else if (status == 2) {
  //   return '服务中';
  // } else if (status == 3) {
  //   return '已完成';
  // } else if (status == 4) {
  //   return '已取消';
  // }
  if (status == 0) {
    return '待接单';
  } else if (status == 1) {
    return '服务中';
  } else if (status == 2) {
    return '已完成';
  } else if (status == 3) {
    return '已取消';
  }
};

// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
export default class OrderItem extends React.Component<Partial<IInfoProps>, T.IInfoState> {

  // 使用state值
  constructor(props) {
    super(props)
    this.state = {}
  }

  //图片渲染
  renderImg(list) {
    let listView = [];
    let urls = [];
    if (list.length > 0) {
      list.map((item, index) => {
        if (item == '') { return }
        urls.push(item);
        listView.push(
          <Image
            key={index}
            onClick={(e) => {
              e.stopPropagation()
              this.onImageClick(item, urls)
            }}
            src={item}
            mode="aspectFill"
            className="goodIcon"
          />
        );
      });
    }
    return listView;
  }
  onImageClick = (item, urls) => {
    this.previewImage(item, urls);
  };
  previewImage = (img, files) => {
    Taro.previewImage({
      current: img, // 当前显示图片的http链接
      urls: files, // 需要预览的图片http链接列表
    });
  };

  async kfClick() {
    let { enterpriseId, serviceLink } = Taro.getStorageSync('serviceonline')
    Taro.openCustomerServiceChat({
      extInfo: { url: serviceLink },
      corpId: enterpriseId,
    });
  }

  render() {
    let {
      main,
      order,
      orderType,//1、我的发布的订单，2、我的接单的订单
      actions: { action },
    } = this.props;
    return (
      <View className="componentOrderItem">
        <View className="card-box">
          <View className="time-price-box">
            {
              order.deliveryDate && order.deliveryTimeBegin && order.deliveryTimeEnd &&
              <Text className="time">
                {moment(order.deliveryDate).format('YYYY-MM-DD') == moment(new Date()).format('YYYY-MM-DD')
                  ? '今天'
                  : moment(order.deliveryDate).format('MM-DD')}
                ｜{moment(order.deliveryDate + ' ' + order.deliveryTimeBegin).format('HH:mm')}-{moment(moment(order.deliveryDate).format('YYYY-MM-DD') + ' ' + order.deliveryTimeEnd).format('HH:mm')}
                <Text> 送达</Text>
              </Text>
            }
            <View></View>
          </View>
          <View style={{ margin: '19px 0' }}>
            <View className="needle-box">
              <View style={{ alignItems: 'center' }}>
                <Image className="q-icon" src={qIcon} mode="widthFix" />
                <View className="dashed-border" />
              </View>
              <View style={{ marginLeft: 7 }}>
                <View style={{ display: '-webkit-box' }} className="line-two">
                  <Text className="addr">{order.communityName}｜{order.courierStationName}</Text>
                </View>
                <View style={{ display: '-webkit-box' }} className="line-one">
                  <Text className="addr-info">{order.communityAddress}</Text>
                </View>
              </View>
            </View>
            {/* <Text className="distance">4.3km</Text> */}
            <View className="needle-box">
              <View style={{ alignItems: 'center' }}>
                <View className="dashed-border" />
                <Image className="s-icon" src={sIcon} mode="widthFix" />
              </View>
              <View style={{ marginLeft: 7, marginTop: 50 }}>
                <View style={{ display: '-webkit-box' }} className="line-two">
                  <Text className="addr">{order.city}{order.area}{order?.street}{order.deliveryAddress}</Text>
                </View>
              </View>
            </View>
          </View>

          {
            orderType == 2 &&
            <View className='name-box'>
              <Text className='name'>{order.consigneeName}</Text>
              <Text className='phone'>{order.consigneeNumber}</Text>
              <Image
                className="phoneIcon"
                src={phoneIcon}
                mode="widthFix"
                onClick={(e) => {
                  e.stopPropagation();
                  Taro.makePhoneCall({ phoneNumber: order.consigneeNumber })
                }} />
            </View>
          }

          <View className="details">
            <Text className="details-text">
              {order.requirement}
            </Text>
          </View>

          {order.img &&
            <View className='img-box'>
              {this.renderImg(order.img.split(';'))}
            </View>
          }

          {/* {
            orderType == 2 &&
            <>
              <View className="time-price-box">
                <View className="code"></View>
                <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                  <Text className='label'>配送费 </Text>
                  <Text style={{ fontSize: 14, color: '#FE3831', fontWeight: 'bold' }}>¥</Text>
                  <Text className="price">{order.price}</Text>
                  <Text className="price" style={{ marginLeft: '10rpx' }}>{order.points}</Text>
                  <Text style={{ fontSize: 14, color: '#FE3831', fontWeight: 'bold' }}>积分</Text>
                </View>
              </View>
            </>
          } */}

          {/* <View className='price-box'>
            <View className='price-row'>
              <View className='left'>基础服务费</View>
              <Text className='right'><Text style={{ fontSize: 14, fontWeight: 'bold', color: '#999999' }}>¥</Text>{order.basePrice}</Text>
              <Text className='right'>{order.basePrice}<Text style={{ fontSize: 14, fontWeight: 'bold', color: '#999999', marginLeft: '10rpx' }}>积分</Text></Text>
            </View>
            <View className='price-row'>
              <View className='left'>时段加价</View>
              <Text className='right'><Text style={{ fontSize: 14, fontWeight: 'bold', color: '#999999' }}>¥</Text>{order.timeRaise}</Text>
              <Text className='right'>{order.timeRaise}<Text style={{ fontSize: 14, fontWeight: 'bold', color: '#999999', marginLeft: '10rpx' }}>积分</Text></Text>
            </View>
          </View> */}

          <View
            className='msg-box'
            onClick={() => {
              this.kfClick()
            }}>
            <Image className="msgIcon" src={msgIcon} mode="widthFix" />
            <Text className='msg-text'>联系客服</Text>
          </View>
        </View>
      </View>
    );
  }
}
